<template>
    <div>
        <el-col :span="20" style="text-align: left">
            <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                <el-form-item label="报工日期">
                    <div class="block">
                        <el-date-picker
                            v-model="queryMap.reportdate"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :clearable="false"
                            style="width: 135px"
                            :picker-options="selDate">
                        </el-date-picker>
                        <span>{{summary}}</span>
                    </div>
                </el-form-item>
                <el-form-item label="姓名/工号">
                    <el-input v-model="queryMap.enameOrEmpno" style="width: 135px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="selReport">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="4" style="text-align: right">
            <el-button type="primary" @click="auditReportByBatch(3)">批量提交</el-button>
            <el-button type="primary" @click="auditReportByBatch(1)">批量驳回</el-button>
        </el-col>
        <el-table
            :data="reportTableData"
            stripe
            border
            style="width: 100%"
            height="545px"
            :row-style="{height: '0'}"
            :header-cell-style="{'text-align': 'center', 'background-color': '#48A9F1', color: 'white'}"
            @selection-change="handleSelectionChange">
            <el-table-column
                prop="empno"
                type="selection"
                align="center">
            </el-table-column>
            <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center">
            </el-table-column>
            <el-table-column
                v-if="false">
                <template slot-scope="scope">
                    <span>{{ scope.row.empno }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="ename"
                label="员工姓名"
                width="80"
                align="center">
            </el-table-column>
            <el-table-column
                label="报工日期"
                width="100"
                align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.reportdate }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="report_time"
                label="报工时间"
                width="180"
                align="center">
            </el-table-column>
            <el-table-column
                prop="attendance"
                label="出勤情况"
                width="80"
                align="center">
            </el-table-column>
            <el-table-column
                prop="workload"
                label="工作量"
                width="80"
                align="center">
            </el-table-column>
            <el-table-column
                prop="overtime"
                label="加班时间"
                width="80"
                align="center">
            </el-table-column>
            <el-table-column
                prop="pname"
                label="项目组">
            </el-table-column>
            <el-table-column
                prop="work"
                label="工作说明">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="auditReport(scope.$index, scope.row, 3)">提交</el-button>
                    <el-button type="text" @click="auditReport(scope.$index, scope.row, 1)">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryMap.page"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="queryMap.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog :visible.sync="returnSeasonFormVisible" :before-close="dialogClose">
            <h2><span style="color: red">*</span>驳回原因</h2>
            <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入驳回原因"
                v-model="returnReason">
            </el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogClose">取 消</el-button>
                <el-button type="primary" @click="reject">{{rejectName}}</el-button>
            </div>
        </el-dialog>
    </div>



</template>

<script>
export default {
    name: "DeptAudit",
    data() {
        //获取路由传递的参数
        let reportdate = this.$route.query.reportdate
        return {
            //禁用日期
            selDate: {
                disabledDate: this.disabledDateMethod,
            },
            //查询条件
            queryMap: {
                reportdate: reportdate === undefined ? this.$store.getters.getNowDate : reportdate,
                enameOrEmpno: '', //员工姓名或员工编号
                deptno: this.$store.state.emp.deptno,
                page: 1,  //当前页码
                limit: 10 //每页条数
            },
            total: 0, //总条数
            summary: '', //报工信息总结
            //表格的数据
            reportTableData: [],
            returnReason: '', //驳回原因
            //审核信息
            auditData: {
                empno: '',       //员工编号
                reportdate: '',  //报工日期
                auditStatus: '', //审核状态
                returnReason: '', //驳回原因
                auditEmpno: this.$store.state.emp.empno
            },
            //批量审核的数据
            auditDataByBatch: {
                multipleSelection: [], //复选框选择的数据
                auditStatus: '', //审核状态
                returnReason: '', //驳回原因
                auditEmpno: this.$store.state.emp.empno //审核人工号
            },
            //对话框宽度
            formLabelWidth: '120px',
            //对话框显隐
            returnSeasonFormVisible: false,
            rejectName: '',
        }
    },
    methods: {
        //禁选当天之后的日期
        disabledDateMethod(time) {
            return time.getTime() > Date.now() - 8.64e7
        },
        //查询
        selReport() {
            const self = this
            self.$http.post('getDeptReportInfoSummary', self.queryMap).then(res => {
                self.summary = res.data[0].summary
            }).catch(() => {
                self.$message.error('获取部门报工总结失败，请联系管理员')
            })
            this.queryMap.page = 1
            self.getReportList()

        },
        getReportList() {
            const self = this
            self.$http.post('getReport', self.queryMap).then(res => {
                self.reportTableData = res.data.reports
                self.total = res.data.count
            }).catch(() => {
                self.$message.error('获取部门报工信息失败，请联系管理员')
            })
        },
        //每页条数改变，val改变后的条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1
            this.getReportList()
        },
        //页码改变，val改变后的页码
        handleCurrentChange(val) {
            this.queryMap.page = val
            this.getReportList()
        },
        //点击复选框触发，val是勾选中的数据
        handleSelectionChange(val) {
            this.auditDataByBatch.multipleSelection = val;
        },
        //批量审核，state为1是驳回，state为3是提交
        auditReportByBatch(state) {
            //没有选择数据时给出提示
            if(this.auditDataByBatch.multipleSelection.length === 0) {
                if(state === 3) {
                    this.$message.info("请选择要提交的报工")
                } else {
                    this.$message.info("请选择要驳回的报工")
                }
            } else {
                this.auditDataByBatch.auditStatus = state
                if(state === 3) {
                    this.updateReportByBatch(this.auditDataByBatch)
                } else {
                    //清空驳回原因
                    this.returnReason = ''
                    this.rejectName = '批量驳回'
                    this.returnSeasonFormVisible = true;
                }
            }

        },
        //批量修改报工信息
        updateReportByBatch(auditDataByBatch) {
            const self = this
            self.$http.post('auditReportByBatch', auditDataByBatch).then(res => {
                if(res.data === 'success') {
                    if(auditDataByBatch.auditStatus === 1) {
                        self.$message.success("批量驳回成功")
                    } else {
                        self.$message.success("批量提交成功")
                    }
                    this.selReport()
                }
            }).catch(() => {
                self.$message.error("批量审核失败，请联系管理员")
            })
        },
        //审核，state为1是驳回，state为3是提交
        auditReport(index, row, state) {
            //获取当前行的数据
            this.auditData.empno = row.empno
            this.auditData.reportdate = row.reportdate
            this.auditData.auditStatus = state
            if(state === 3) {
               this.updateReport(this.auditData)
            } else {
                //清空驳回原因
                this.returnReason = ''
                this.rejectName = '驳回'
                this.returnSeasonFormVisible = true;
            }
        },
        //点击驳回/批量驳回
        reject() {
            if(this.returnReason === '') {
                this.$message.error('驳回原因不能为空')
            } else {
                if(this.rejectName === '驳回') {
                    this.auditData.returnReason = this.returnReason
                    this.updateReport(this.auditData)
                } else {
                    this.auditDataByBatch.returnReason = this.returnReason
                    this.updateReportByBatch(this.auditDataByBatch)
                }
                this.dialogClose()
            }
        },
        //修改报工信息
        updateReport(auditData) {
            const self = this
            self.$http.post('auditReport', auditData).then(res => {
                if(res.data === 'success') {
                    if(auditData.auditStatus === 1) {
                        self.$message.success("驳回成功")
                    } else {
                        self.$message.success("提交成功")
                    }
                    this.selReport()
                }
            }).catch(() => {
                self.$message.error("审核失败，请联系管理员")
            })
        },
        //关闭对话框
        dialogClose() {
            this.returnSeasonFormVisible = false;
        },
    },
    computed: {

    },
    created() {
        this.selReport()
    }
}
</script>

<style scoped>

</style>